<template>
  <div>
     <!-- position -->
    <div class="position">
      <Breadcrumb>
          <BreadcrumbItem to="/"><Icon type="ios-home-outline" />首页</BreadcrumbItem>
          <BreadcrumbItem to="/cloudVideo">我的诊室</BreadcrumbItem>
          <BreadcrumbItem to="/cloudVideo">患者列表</BreadcrumbItem>
          <BreadcrumbItem>患者详情</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <!-- content -->
    <div class="hd pd20">
      <div class="title-1">
        <div class="inner">患者信息</div>
        <div class="inner-right">
          <Button type="warning" @click="endVideo">结束问诊</Button>
          <Button type="primary">
            <Icon type="md-person" size="16"/>
            下一位
          </Button>
        </div>
      </div>


      <Card class="mt20">
        <Row>
          <Col span="5">
            <img src="../../assets/images/patient_default.png" alt="">
            <div class="text-center">
              <Icon type="ios-mail-outline" size="24" color="navy"/> 发送短信 &nbsp;&nbsp;&nbsp;
              <Icon type="ios-videocam-outline" size="24" color="navy"/> 发起视频
            </div>
          </Col>
          <Col span="12">
            <table class="common-table">
              <tr>
                <td class="t3 text-right">姓名：</td>
                <td>张家辉</td>
                <td class="t3 text-right">预约日期：</td>
                <td>2018-10-22</td>
              </tr>
               <tr>
                <td class="t3 text-right">性别：</td>
                <td>男</td>
                <td class="t3 text-right">预约时段：</td>
                <td>10:00-12:00</td>
              </tr>
               <tr>
                <td class="t3 text-right">年龄：</td>
                <td>40岁</td>
                <td class="t3 text-right">预约医生：</td>
                <td>哎聊天</td>
              </tr>
               <tr>
                <td class="t3 text-right">门诊号码：</td>
                <td>412555555</td>
                <td class="t3 text-right">就诊序号：</td>
                <td>2</td>
              </tr>
               <tr>
                <td class="t3 text-right" >证件号码：</td>
                <td>41445555555565</td>
              </tr>
            </table>
          </Col>
        </Row>
      </Card>

       <div class="title-1 mt20">
        <div class="inner">主观病例</div>
      </div>

      <Card class="mt10">
        <p slot="title">
            所患疾病
        </p>
        
        <Row>
          <Col span="24">
            基督教是范德萨反倒是发生地方都是反倒是
          </Col>
        </Row>
      </Card>
      <Card class="mt10">
        <p slot="title">
            病情描述
        </p>
        
        <Row>
          <Col span="24">
            基督教是范德萨反倒是发生地方都是反倒是
          </Col>
        </Row>
      </Card>

      <Card class="mt10">
        <p slot="title">
            病例报告照片
        </p>
        <Row class="row-image" :gutter="10">
          <Col span="4" v-for="i in 8" class="item" @click.native="itemClick">
            <img src="../../assets/images/patient_default.png" alt="">
            <div class="text-viewbig">点击查看大图</div>
          </Col>
        </Row>
      </Card>

      <div class="title-1 mt20">
        <div class="inner">处置意见</div>
        <div class="inner-right">
          <Button type="primary" @click="modal2=true">
             <Icon type="md-create" size="20"/> 
            编辑
          </Button>
        </div>
      </div>
      <Card class="mt10">
       
        <Row>
          <Col span="24">
            基督教是范德萨反倒是发生地方都是反倒是
          </Col>
        </Row>
      </Card>

       <div class="title-1 mt20">
        <div class="inner">视频记录</div>
      </div>

      <Card class="mt20">
        <Row>
          <Col span="24">
            <table class="common-table table-center">
              <thead>
                <tr>
                <th>开始时间</th>
                <th>结束时间</th>
                <th>是否接通</th>
                <th>持续时间</th>
                <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="i in 5">
                  <td>2018-01-01 10:20</td>
                  <td>2018-01-01 12:20</td>
                  <td>是</td>
                  <td>00:30:22</td>
                  <td>
                    <a href="javascript:;">
                      <Icon type="ios-play" size="20"/>
                      查看视频
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </Col>
        </Row>
      </Card>
    </div>

    <!-- modal -->
    <Modal
        v-model="modal1"
        title="查看大图"
        @on-ok="modal1=false"
        :footer-hide="true"
        >
        <p class="text-center">
          <img src="../../assets/images/patient_default.png" alt="">
        </p>
    </Modal>
    <Modal
        v-model="modal2"
        title="填写处置意见"
        @on-ok="okHandle"
        okText="提交并结束问诊">
        <p>结束问诊后处置意见将无法改写，请确认内容后提交：</p>
        <p>
          <Input v-model="area" type="textarea" :rows="4" placeholder="请输入处置意见..." />
        </p>
    </Modal>

  </div>
</template>

<script>
export default {
  data () {
    return {
      modal1: false,
      modal2: false,
      area: ''
    }
  },
  methods: {
    itemClick () {
      this.modal1 = true
    },
    endVideo() {
      this.$Modal.confirm({
        title: '结束提醒',
        content: '是否结束本次问诊？',
        okText: '结束问诊',
        onOk: () => {
          // del
        }
      })
    },
    okHandle () {

    }
  }
}
</script>

<style lang="less" scoped>
.common-table {
  &.table-center {
    text-align: center;
  }
  border-collapse: collapse;
  width: 100%;
  thead {
  }
  td{
    padding: 6px;
  }
}
.row-image {
  .item {
    position: relative;
    .text-viewbig {
      position: absolute;
      bottom: 6px;
      left: 5px;
      right: 5px;
      background: #5669C7;
      color: #fff;
      text-align: center;
      line-height: 26px;
      cursor: pointer;
    }
  }
  img {
    width: 100%;
  }
}
</style>
